const { defineConfig } = require('@vue/cli-service')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = defineConfig({
	transpileDependencies: true,
	// 修改页面 title
	chainWebpack: config => {
		// 限制图片10000b以下转换成base64，减少http请求    实践证明  已自动集成 好 10KB
		// 修改页面 title
		config.plugin('html').tap(args => {
			args[0].title = '物业后台管理系统'
			return args
		})
	},
	// 跳过检查host--这个是给webpack-dev-server开启可IP和域名访问权限-->QQ登陆 + 内网穿透
	devServer: { historyApiFallback: true, allowedHosts: 'all' },
	// dist index 白屏 './'  history 模式 刷新 Cannot GET /XXXX   '/'
	publicPath: process.env.VUE_APP_publicPath,
	// 设置css的主入口文件
	css: {
		loaderOptions: {
			scss: {
				// 全局sass变量
				additionalData: `@import "~@/assets/styles/common.scss";
				                 @import "normalize.css";`,
			},
		},
	},
	// elementPlus
	configureWebpack: {
		plugins: [
			AutoImport({
				resolvers: [ElementPlusResolver()],
			}),
			Components({
				resolvers: [ElementPlusResolver()],
			}),
			// Loading、Message 等这种以服务的方式来调用 自动导入样式
			// 组件需要单独 引入    import { ElMessage } from 'element-plus'
			require('unplugin-element-plus/webpack')({
				// options
			}),
		],
	},
})
